<template>
	<view class="mine-pages">
		<!-- 用户信息 -->
		<view class="user-info">
			<view class="status-bar"> </view>
			<view class="user-details">
				<image :src="userInfo.avatar?userInfo.avatar: '/static/logo.png'" class="avatar" @tap="goLogin" />
				<view class="username" :style="{width:w}" @tap="goLogin">
					<view class="nickname"> {{ userInfo.name?userInfo.name:'点击登录' }} </view>
					<view class="returns">
						<view class="num"> 退货次数：{{userInfo.member?.order_refund_num?userInfo.member?.order_refund_num:0}}次 </view>
						<BFB :bfb="userInfo.member?.order_refund_ratio" v-if="userInfo.member?.order_refund_ratio" />
					</view>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="icon">
					<view class="text" @tap="kf"> 客服 </view>
					<view class="text" @tap="goSetting"> 设置 </view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="content">
			<!-- 我的订单 -->
			<view class="my-order">
				<view class="order-title">
					<view class="title"> 我的订单 </view>
					<view class="all-order" @tap="goOrderManage('-1')">
						<view class="text"> 全部订单 </view>
						<image src="/static/icon/order/right.png" class="order-icon" />
					</view>
				</view>
				<view class="order-nav">
					<view class="nav-item" @tap="goOrderManage(item.id)" v-for="item in orderTab" :key="item">
						<image :src="item.icon" class="n-img" />
						<view class="text"> {{ item.title }} </view>
					</view>
				</view>
			</view>
			<!-- 常用工具 -->
			<view class="tools">
				<view class="tool-title"> 常用工具 </view>
				<view class="tool-list">
					<view class="item" @tap="goTools('/pages/collectTracksFollow/collectTracksFollow?title=我的收藏')">
						<image src="/static/icon/mine/collect.png" class="i-img" />
						<view class="text"> 我的收藏 </view>
					</view>
					<view class="item" @tap="goTools('/pages/collectTracksFollow/collectTracksFollow?title=我的足迹')">
						<image src="/static/icon/mine/zj.png" class="i-img" />
						<view class="text"> 我的足迹 </view>
					</view>
					<view class="item" @tap="goTools('/pages/agentPages/becomeAgent/recruitmentAgent')" v-if="userInfo.is_dai!=1">
						<image src="/static/icon/mine/dlzm.png" class="i-img" />
						<view class="text"> 代理招募 </view>
					</view>
					<view class="item" @tap="goTools('/pages/myEvalute/myEvalute')">
						<image src="/static/icon/mine/sc.png" class="i-img" />
						<view class="text"> 我的评价 </view>
					</view>
					<view class="item" @tap="goTools('/pages/agentPages/agentHome/agentHome')" v-if="userInfo.is_dai==1">
						<image src="/static/icon/mine/dls.png" class="i-img" />
						<view class="text"> 我是代理商 </view>
					</view>
					<view class="item" @tap="goTools('/pages/shopPages/enterShop/enterShopType')" v-if="userInfo.is_shop!=1">
						<image src="/static/icon/mine/sjgr.png" class="i-img" />
						<view class="text"> 商家入驻 </view>
					</view>
					<view class="item" @tap="goTools('/pages/shopPages/shopHome/shopHome')" v-if="userInfo.is_shop==1">
						<image src="/static/icon/mine/sjgr.png" class="i-img" />
						<view class="text"> 我是商家 </view>
					</view>
					<view class="item" @tap="goTools('/pages/riderPages/riderHome/riderHome')" v-if="userInfo.rider==1">
						<image src="/static/icon/mine/qs.png" class="i-img" />
						<view class="text"> 我是骑手 </view>
					</view>
					<view class="item" @tap="goTools('/pages/riderPages/becomeRider/becomeRider')" v-if="userInfo.rider!=1">
						<image src="/static/icon/mine/qszm.png" class="i-img" />
						<view class="text"> 骑手招募 </view>
					</view>
					<view class="item" @tap="goTools('/pages/collectTracksFollow/collectTracksFollow?title=关注店铺')">
						<image src="/static/icon/mine/gzdp.png" class="i-img" />
						<view class="text"> 关注店铺 </view>
					</view>
					<view class="item" @tap="goTools('/pages/address/address')">
						<image src="/static/icon/mine/location.png" class="i-img" />
						<view class="text"> 收货地址 </view>
					</view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="set-kf">
				<div class="sk-item" @tap="kf">
					<div class="label"> 客 服 </div>
					<image src="/static/icon/mine/kf.png" class="value"/>
				</div>
				<div class="sk-item" @tap="goSetting"> 
					<div class="label"> 设 置 </div>
					<image src="/static/icon/mine/setting.png" class="value"/>
				</div>
			</view>
			<!-- #endif -->
		</view>
	</view>
	<TabBar :currentPage="3" />
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow,
		onBackPress
	} from '@dcloudio/uni-app'
	import TabBar from '@/components/TabBar.vue';
	import BFB from '@/components/BFB.vue'
	import {
		useUserStore,
		useCommStore
	} from '@/store/index.js'
	import {
		GetBecomeAgentApi,
		GetApplyRiderApi,
		GetEnterShopApi
	} from '@/service/index.js'
	// 获取胶囊按钮位置信息
	// #ifdef MP-WEIXIN
	const {
		height
	} = wx.getMenuButtonBoundingClientRect()
	const iconTop = computed(() => height + 2 + 'px')
	// #endif
	// #ifndef MP-WEIXIN
	const iconTop = computed(() => '0px')
	// #endif
	const {
		safeArea
	} = uni.getSystemInfoSync()
	const w = computed(() => safeArea.width - 182 + 'px')
	const userInfo = computed(() => {
		const {
			userInfo
		} = useUserStore()
		return userInfo
	})
	const orderTab = [{
			id: 0,
			title: '待付款',
			icon: '/static/icon/mine/dfk.png'
		},
		{
			id: 1,
			title: '已付款',
			icon: '/static/icon/mine/yfk.png'
		},
		{
			id: 2,
			title: '配送中',
			icon: '/static/icon/mine/psz.png'
		},
		{
			id: 3,
			title: '已完成',
			icon: '/static/icon/mine/ywc.png'
		},
		{
			id: 4,
			title: '售后/退款',
			icon: '/static/icon/mine/tk.png'
		}
	]
	const goTools = (item) => {
		uni.navigateTo({
			url: item
		})
		return
		const {
			id,
			nav,
			title
		} = item
		const {
			userInfo,
			GETUSERINFO
		} = useUserStore()
		if (id === 1 || id === 2 || id === 9) {
			uni.navigateTo({
				url: nav + `?title=${title}`
			})
		} else if (id === 3) {
			if (userInfo.is_dai == 1) return uni.navigateTo({
				url: '/pages/agentPages/agentHome/agentHome'
			})
			else uni.navigateTo({
				url: nav
			})
		} else if (id === 5) {
			if (userInfo.is_dai == 0) return getApp().globalData.toast('你还没有入驻成为代理商')
			uni.navigateTo({
				url: nav
			})
		} else if (id === 6) {
			if (userInfo.is_shop == 1) return uni.navigateTo({
				url: '/pages/shopPages/shopHome/shopHome'
			})
			else uni.navigateTo({
				url: nav
			})
		} else if (id === 7) {
			if (userInfo.rider == 0) return getApp().globalData.toast('你还没有入驻成为骑手')
			uni.navigateTo({
				url: nav
			})
		} else if (id === 8) {
			if (userInfo.rider == 1) return uni.navigateTo({
				url: '/pages/riderPages/riderHome/riderHome'
			})
			else uni.navigateTo({
				url: nav
			})
		} else {
			uni.navigateTo({
				url: nav
			})
		}
	}
	const goLogin = () => {
		const {
			token
		} = useUserStore()
		if (token) return
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	const goSetting = () => {
		uni.navigateTo({
			url: '/pages/setting/setting'
		})
	}
	const goOrderManage = (id) => {
		uni.navigateTo({
			url: `/pages/orderManage/orderManage?orderStatus=${id}`
		})
	}
	const kf = () => {
		const {
			comm
		} = useCommStore()
		uni.makePhoneCall({
			phoneNumber: comm.hellp_mobile
		})
	}
	onLoad(() => {
		uni.hideTabBar()
	})
	onShow(() => {
		const {
			GETUSERINFO,
			token
		} = useUserStore()
		if (token) GETUSERINFO()
	})
	onBackPress((e) => {
		if (e.from == 'backbutton') return uni.switchTab({
			url: '/pages/index/index'
		})
	})
</script>

<style lang="scss" scoped>
	.mine-pages {
		width: 100%;

		.user-info {
			width: 100%;
			height: 200px;
			background: url('/static/icon/components/home-top.png') no-repeat center center;
			background-size: 100% 100%;
			padding: 25px 12px 0;
			box-sizing: border-box;

			.status-bar {
				height: var(--status-bar-height);
				width: 100%;
			}

			.user-details {
				display: flex;
			}

			// justify-content: space-between;
			.avatar {
				width: 54px;
				height: 54px;
				border-radius: 50%;
			}

			.username {
				flex: 1;
				margin-left: 10px;

				.nickname {
					color: #333333;
					font-size: 16px;
					max-width: 195px;
					font-weight: bold;
					line-height: 19px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.returns {
					margin-top: 7px;
					display: flex;

					.num {
						color: #666;
						font-size: 12px;
						min-width: 87px;
						font-weight: 400;
						line-height: 22px;
						margin-right: 10px;
					}
				}
			}

			.icon {
				display: flex;
				align-items: start;
				margin-left: 10px;

				.text {
					font-size: 12px;

					&:nth-of-type(1) {
						margin-right: 10px;
					}
				}
			}
		}

		.content {
			padding: 0 12px;
			box-sizing: border-box;
			transform: translateY(-65px);

			// 我的订单
			.my-order {
				border-radius: 10px;
				padding: 15px 12px 17px;
				background: rgba(255, 255, 255, 0.9);
				border: 1px solid #FFFFFF;

				.order-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						color: #333333;
						font-size: 16px;
						font-weight: bold;
						line-height: 20px;
					}

					.all-order {
						color: #333333;
						font-size: 13px;
						font-weight: 400;
						line-height: 17px;
						display: flex;
						align-items: center;

						.order-icon {
							width: 14px;
							height: 14px;
						}
					}
				}

				.order-nav {
					margin-top: 10px;
					display: flex;
					justify-content: space-between;

					.nav-item {
						display: flex;
						align-items: center;
						flex-direction: column;
						font-size: 13px;
						color: #333333;

						.n-img {
							width: 30px;
							height: 30px;
							margin-bottom: 3px;
						}
					}
				}
			}

			// 常用工具
			.tools {
				padding: 15px;
				margin-top: 10px;
				border-radius: 10px;
				background-color: #fff;
				box-sizing: border-box;

				.tool-title {
					color: #333333;
					font-size: 16px;
					font-weight: bold;
					line-height: 20px;
					margin-bottom: 20px;
				}

				.tool-list {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					/* 创建4列 */
					// grid-template-rows: repeat(3, 1fr); /* 创建3行 */
					gap: 40px 15px;
					/* 如果需要间距，可以设置为非零值 */
					box-sizing: border-box;

					/* 确保内边距不会增加容器大小 */
					.item {
						display: flex;
						align-items: center;
						flex-direction: column;
						color: #555555;
						font-size: 12px;
						font-weight: 400;

						.i-img {
							width: 28px;
							height: 28px;
							margin-bottom: 6px;
						}
					}
				}
			}
			.set-kf {
				padding: 10px 0;
				.sk-item {
					height: 44px;
					text-align: center;
					border-radius: 10px;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 12px;
					margin-bottom: 10px;
					.value {
						width: 16px;
						height: 16px;
					}
				}
			}
		}
	}
</style>